<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <!-- 引入初始化的css文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入公共的css文件 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入个人中心的css文件 -->
    <link rel="stylesheet" href="./css/personal.css">
    <!-- 引入网站图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/personal.js"></script>
</head>

<body>
    <!-- 快捷导航区域开始 -->
    <div class="shortcut">
        <div class="banxin">
            <ul class="fr clearfix">
                <li>
                    <a href="javascript:;" class="gologin">请先登录</a>
                </li>
                <li>|</li>
                <li>
                    <a href="javascript:;" class="zc">免费注册</a>
                </li>
                <li>|</li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>|</li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>|</li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>|</li>
                <li>
                    <a href="javascript:;">关于我们</a>
                </li>
                <li>|</li>
                <li>
                    <a href="javascript:;" class="mobile">手机版</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 快捷导航区域结束 -->

    <!-- 导航区域开始 -->
    <div class="header">
        <div class="banxin header-dingwei">
            <div class="logo">
                <h1>
                    <a href="index.html" title="小兔鲜儿官网">小兔鲜</a>
                </h1>
            </div>
            <ul class="nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="javascript:;">生鲜</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">餐厨</a></li>
                <li><a href="javascript:;">电器</a></li>
                <li><a href="javascript:;">居家</a></li>
                <li><a href="javascript:;">洗护</a></li>
                <li><a href="javascript:;">孕婴</a></li>
                <li><a href="javascript:;">服装</a></li>
            </ul>
            <div class="search-shop">
                <input type="search" placeholder="搜一搜">
                <a href="javascript:;"></a>
                <span>0</span>
            </div>
        </div>
    </div>
    <!-- 导航区域结束 -->
    <!-- 主体区域开始 -->
    <div class="main">
        <div class="banxin main-flex">
            <div class="main-left">
                <div class="main-left-hd">
                    <a href="javascript:;" class="avatar">
                        <img src="uploads/avatar_1.png" alt="">
                    </a>
                    <h5 class="une">张小花</h5>
                    <a href="javascript:;" class="svip">黄金会员</a>
                </div>
                <div class="main-left-bd">
                    <ul class="main-left-ul-1">
                        <li class="main-left-bd-first">我的账户</li>
                        <li>个人中心</li>
                        <li>消息通知</li>
                        <li>个人信息</li>
                        <li>安全设置</li>
                        <li>地址管理</li>
                        <li>我的积分</li>
                        <li>我的足迹</li>
                        <li>邀请有礼</li>
                        <li>幸运抽奖</li>
                    </ul>
                    <ul class="main-left-ul-2">
                        <li class="main-left-bd-first">交易管理</li>
                        <li>我的订单</li>
                        <li>优惠券</li>
                        <li>礼品卡</li>
                        <li>评价晒单</li>
                        <li>售后服务</li>
                    </ul>
                    <ul class="main-left-ul-3">
                        <li class="main-left-bd-first">我的收藏</li>
                        <li>收藏的商品</li>
                        <li>收藏的商品</li>
                        <li>收藏的商品</li>
                    </ul>
                    <ul class="main-left-ul-4">
                        <li class="main-left-bd-first">帮助中心</li>
                        <li>帮助中心</li>
                        <li>在线客服</li>

                    </ul>
                </div>
            </div>
            <div class="main-right">
                <ul class="main-right-hd">
                    <li>
                        <a href="javascript:;">
                            <img src="images/vip.png" alt="">
                            <span>会员中心</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/safe.png" alt="">
                            <span>安全设置</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/address.png" alt="">
                            <span>地址管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span class="main-right-hd-number">6</span>
                            <span>优惠券</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span class="main-right-hd-number">70</span>
                            <span>礼品卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span class="main-right-hd-number">120</span>
                            <span>积分</span>
                        </a>
                    </li>

                </ul>
                <div class="main-right-bd">
                    <!-- 订单区域 -->
                    <div class="order common">
                        <div class="common-hd">
                            <h4>我的订单</h4>
                            <a href="javascript:;">查看全部</a>
                        </div>
                        <div class="order-bd">
                            <ul class="order-bd-common">
                                <li class="order-bd-first">
                                    <img src="uploads/order_goods_1.jpg" alt="">
                                    <div class="xinxi">
                                        <p>拉夫劳伦t恤男正品圆领短袖...</p>
                                        <p>颜色：白色 尺码：M 数量：1</p>
                                    </div>
                                    <div class="fukuan">
                                        <p>待付款</p>
                                    </div>
                                </li>
                                <li class="order-bd-two zhifu">
                                    <p>¥99.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </li>
                                <li class="order-bd-three zhifu">
                                    <a href="javascript:;">立即付款</a>
                                    <a href="javascript:;">查看详情</a>
                                    <a href="javascript:;">取消订单</a>
                                </li>
                            </ul>
                            <ul class="order-bd-common">
                                <li class="order-bd-first">
                                    <img src="uploads/order_goods_2.jpg" alt="">
                                    <div class="xinxi">
                                        <p>李宁跑步鞋男鞋空气弧...</p>
                                        <p>颜色：灰色 尺码：42 数量：1</p>
                                    </div>
                                    <div class="fukuan">
                                        <p>待收货</p>
                                        <a href="javascript:;">查看物流</a>
                                    </div>
                                </li>
                                <li class="order-bd-two zhifu">
                                    <p>¥199.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </li>
                                <li class="order-bd-three zhifu">
                                    <a href="javascript:;">确认收货</a>
                                    <a href="javascript:;">查看详情</a>
                                    <a href="javascript:;">再次购买</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 收藏商品区域 -->
                    <div class="collection common">
                        <div class="common-hd">
                            <h4>收藏的商品</h4>
                            <a href="javascript:;">查看全部</a>
                        </div>
                        <ul class="collection-bd">
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/clothes_goods_1.jpg" alt="">
                                    <p>人本秋季厚底帆布鞋<br />韩版低帮增高学生</p>
                                    <p><i>¥</i>55</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/clothes_goods_2.jpg" alt="">
                                    <p>迪士尼真皮针扣表带宽度<br />14-16mm规格双色压纹</p>
                                    <p><i>¥</i>20.9</p>
                                    <span class="discount">6折</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/history_goods_3.jpg" alt="">
                                    <p>三都港 冷冻无公害黄花鱼<br />700g 2条 袋装  </p>
                                    <p><i>¥</i>209</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/clothes_goods_4.jpg" alt="">
                                    <p>ONLY夏季新款高腰宽松<br />七分阔腿裙裤休闲裤</p>
                                    <p><i>¥</i>274.5</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 足迹区域 -->
                    <div class="collection common">
                        <div class="common-hd">
                            <h4>我的足迹</h4>
                            <a href="javascript:;">查看全部</a>
                        </div>
                        <ul class="collection-bd">
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/history_goods_1.jpg" alt="">
                                    <p>拉夫劳伦t恤男正品<br />圆领短袖</p>
                                    <p><i>¥</i>99</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/history_goods_2.jpg" alt="">
                                    <p>李宁跑步鞋男鞋空气弧<br />2018春季款</p>
                                    <p><i>¥</i>171.9</p>
                                    <span class="discount">6折</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/history_goods_3.jpg" alt="">
                                    <p>三都港 冷冻无公害黄花鱼<br />700g 2条 袋装  </p>
                                    <p><i>¥</i>209</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="uploads/clothes_goods_4.jpg" alt="">
                                    <p>ONLY夏季新款高腰宽松<br />七分阔腿裙裤休闲裤</p>
                                    <p><i>¥</i>274.5</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体区域结束 -->
    <!-- 底部区域 -->
    <div class="footer">
        <!-- 下载APP区域 -->
        <ul class="app banxin">
            <li>
                <p>客户服务</p>
                <a href="javascript:;" class="app-a-1">在线客服</a>
                <a href="javascript:;" class="app-a-2">问题反馈</a>
            </li>
            <li>
                <p>关注我们</p>
                <a href="javascript:;" class="app-a-3">公众号</a>
                <a href="javascript:;" class="app-a-4">微博</a>
            </li>
            <li>
                <p>下载APP</p>
                <div class="app-down-l">
                    <img src="uploads/qrcode.png" alt="">
                </div>
                <div class="app-down-r">
                    <p>扫描二维码</p>
                    <p>立马下载APP</p>
                    <span class="app-down-r-xia">下载页面</span>
                </div>
            </li>
            <li>
                <p>服务热线</p>
                <p class="app-mobile">400-0000-000</p>
                <p class="app-day">周一至周日 8:00-18:00</p>
            </li>
        </ul>
        <!-- 版权区域 -->
        <div class="copyright">
            <div class="banxin">
                <ul class="copyright-hd">
                    <li>
                        <span class="copyright-hd-icon-1"></span>
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span class="copyright-hd-icon-2"></span>
                        <span>物流快捷</span>
                    </li>
                    <li>
                        <span class="copyright-hd-icon-3"></span>
                        <span>品质新鲜</span>
                    </li>
                </ul>
                <div class="copyright-bd clearfix">
                    <ul class="clearfix">
                        <li><a href="javascript:;">关于我们</a></li>
                        <li>|</li>
                        <li><a href="javascript:;">帮助中心</a></li>
                        <li>|</li>
                        <li><a href="javascript:;">售后服务</a></li>
                        <li>|</li>
                        <li><a href="javascript:;">配送与验收</a></li>
                        <li>|</li>
                        <li><a href="javascript:;">商务合作</a></li>
                        <li>|</li>
                        <li><a href="javascript:;">搜索推荐</a></li>
                        <li>|</li>
                        <li><a href="javascript:;">友情链接</a></li>
                    </ul>
                    <p>CopyRight @ 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 客服区域 -->
    <div class="kefu">
        <a href="https://w102.ttkefu.com/k/linkurl/?t=1C2FFF3">
            <img src="./images/kefu.gif" alt="">
        </a>
    </div>
</body>

</html>